<template>
  <div class="app-container">
    <eHeader :sup_this="sup_this" />
    <!--表格渲染-->
    <DataGridTable
      v-loading="loading"
      ref="mainTable"
      :sup_this="sup_this"
      :data="data.rtnList"
      :total="total"
      :show-row-number="true"
      :multi-select="false"
      :grid-id="reportCode + 'ProcessGridId'"
      :all-define-columns="computeColumns"
      max-height="200px"
      @selection-change="handleGridSelectionChange">
      <DataGridColumnSlot
        v-for="reportField in reportData.reportFieldList"
        v-if="reportField.fieldDisplayFlag === 'Y'"
        :slot="reportField.fieldName"
        :prop="reportField.fieldName"
        :width="reportField.fieldWidth"
        :key="reportField.id"
        :label="reportField.fieldDisplayName"
        :header-align="reportField.fieldType === 'number' ? 'right' : 'left'"
        :align="reportField.fieldType === 'number' ? 'right' : 'left'" >
        <template slot-scope="scope">
          <a
            v-if="reportField.fieldHref !== ''"
            title="明细"
            @click="toHref(reportField.fieldHrefType,reportField.fieldHref,scope.row['hrefparam_' + reportField.fieldName])">
            <template v-if="reportField.fieldType === 'date'">
              {{ parseDate(scope.row[reportField.fieldName]) }}
            </template>
            <template v-else-if="reportField.fieldType === 'datetime'">
              {{ parseTime(scope.row[reportField.fieldName]) }}
            </template>
            <template v-else>
              {{ scope.row[reportField.fieldName] }}
            </template>
          </a>
          <span v-else>
            <template v-if="reportField.fieldType === 'date'">
              {{ parseDate(scope.row[reportField.fieldName]) }}
            </template>
            <template v-else-if="reportField.fieldType === 'datetime'">
              {{ parseTime(scope.row[reportField.fieldName]) }}
            </template>
            <template v-else>
              {{ scope.row[reportField.fieldName] }}
            </template>
          </span>
        </template>
      </DataGridColumnSlot>
    </DataGridTable>
    <div class="crud-opts">
      <el-radio-group v-model="chartType" class="crud-opts-right" size="mini">
        <el-radio-button
          v-for="item in dicts.report_chart_type"
          v-if="containChartDisplayType(item.dictCode)"
          :key="item.id"
          :label="item.dictCode"
          size="mini">
          {{ item.dictName }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <el-card v-show="chartType === 'line'" class="box-card" shadow="never" style="padding: 30px;">
      <LineChart :chart-data="chartData" />
    </el-card>
    <el-card v-show="chartType === 'bar'" class="box-card" shadow="never" style="padding: 30px;">
      <BarChart :chart-data="chartData" />
    </el-card>
    <DynamicLoadReportComp ref="dynamicLoadReportComp" />
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { previewReportDataUrl, getReportDefine } from '@/api/report/reportDefine'
import { parseTime, parseDate, convertParamVal } from '@/utils/index'
import LineChart from './module/reportLineChart'
import BarChart from './module/reportBarChart'
import eHeader from './module/header'
import DynamicLoadReportComp from '@/views/report/reportView/module/DynamicLoadReportComp'

export default {
  components: { LineChart, BarChart, eHeader, DynamicLoadReportComp },
  mixins: [initData],
  dictTypes: ['report_chart_type'],
  props: {
  },
  data() {
    return {
      reportCode: '',
      reportId: '',
      hrefParam: null,
      sup_this: this,
      computeColumns: [],
      chartType: '',
      chartData: {},
      reportData: {
        busMainData: {
          chartDisplayType: ''
        },
        reportParamList: [],
        reportFieldList: []
      }
    }
  },
  watch: {
    reportCode: {
      handler(val) {
        if (val) {
          const _this = this
          getReportDefine(_this.reportCode, _this.reportId, _this.hrefParam).then(res => {
            _this.reportData = res.data
            _this.params['busMainData'] = _this.reportData.busMainData
            _this.params['reportParamList'] = _this.reportData.reportParamList
            _this.params['reportFieldList'] = _this.reportData.reportFieldList
            _this.init()
            setTimeout(() => {
              const tmpColumns = []
              this.reportData.reportFieldList.forEach(tmpvo => {
                if (tmpvo.fieldDisplayFlag === 'Y') {
                  tmpColumns.push(tmpvo.fieldName)
                }
              })
              this.computeColumns = tmpColumns
            }, 300)
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.searchToggle = true
    if (this.$route.query.reportCode) {
      this.setReportCode(this.$route.query.reportCode, null, this.$route.query.hrefParam)
    }
    this.url = previewReportDataUrl()
  },
  mounted() {
    this.$emit('afterMounted')
  },
  methods: {
    parseTime,
    parseDate,
    setReportCode(reportCode, reportId, hrefParam) {
      this.reportCode = reportCode
      this.reportId = reportId
      this.hrefParam = hrefParam
    },
    containChartDisplayType(value) {
      if (this.reportData.busMainData.chartDisplayType) {
        const rtn = this.reportData.busMainData.chartDisplayType.indexOf(value) !== -1
        if (rtn && !this.chartType) {
          this.chartType = value
        }
        return rtn
      }
      return false
    },
    async beforeInit() {
      this.data.rtnList = []
      return true
    },
    afterInit(res) {
      this.chartData = res.data.otherParams
      // this.chartData = { 'y': [{ 'label': 'pv', 'data': [800, 400, 8000], 'extend': {}}, { 'label': 'ip', 'data': [1000, 2000, 3000], 'extend': {}}], 'x': ['2020-05-13', '2020-05-19', '2020-05-26'] }
    },
    toHref(fieldHrefType, fieldHref, hrefParam) {
      // 报表弹出框
      if (fieldHrefType === 'rpt_diag') {
        const rptArr = fieldHref.split('&') // 用 & 分隔 test_rpt_0624&grid
        const reportCode = rptArr[0]
        const gridType = rptArr.length > 2 ? rptArr[1] : 'grid'
        const _this = this.$refs.dynamicLoadReportComp
        _this.loadComp('report' + reportCode, gridType, '', reportCode, null, hrefParam)
      } else if (fieldHrefType === 'rpt_page') {
        const str = fieldHref.split('?')
        const reportPath = str[0]
        let queryObject = {}
        if (str.length > 1) {
          queryObject = convertParamVal(str[1])
        }
        if (hrefParam) {
          queryObject.hrefParam = hrefParam
        }
        this.$router.push({ path: reportPath, query: queryObject })
      }
    }
  }
}
</script>
